﻿.childNavigator {
    position : absolute;
    width : 100%;
    height : 100%;
    display : none;
    top: 0;
}

.childNavigator .childNavigator-overlay {
    position : absolute;
    width : 100%;
    height : 100%;
    background-color : black;
    opacity : 0;
    /*display : none;*/
    transition : opacity 600ms ease-in-out;
}
    
.childNavigator .childNavigator-overlay.visible {
    /*display : block;*/
    opacity: 0.7;
}

.childNavigator .childNavigator-contentPlaceholder {
    position : absolute;
    width : 100%;
    max-width :600px;

    height : 100%; 
    right : 0;
    /*display : none;*/
    top : 0;   
    transition : transform 250ms ease-in-out 100ms;
    transform : translateX(100%);
    background-color : white;
}

    .childNavigator .childNavigator-contentPlaceholder.visible {
        /*display : block;*/
        transform : translateX(0);
    }